<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="shortcut icon" href="img/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpeg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer2"></span>
        <a href="myblog_list.html">我的主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript: logout();">注销</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/default.png" class="avtar" alt="">
                <h3 id="nickname"></h3>
                <a href="http:www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>阅读量</span>
                </div>
                <div class="counter">
                    <span id="account"></span>
                    <span id="read_count"></span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="date">
                    <span id="create_time"></span>
                </div>
                <!-- 博客正文 -->
                <div id="context"></div>
            </div>
        </div>
    </div>
    <script>
        // 获取当前url中某个参数
        function getURLparam(key) {
            var param = location.search;
            if (param.length > 0) {
                param = param.substring(1);
                var paramArr = param.split('&');
                for (var i = 0; i < paramArr.length; i++) {
                    var nameVal = paramArr[i].split('=');
                    if (nameVal[0] == key) {
                        return nameVal[1];
                    }
                }
            } else {
                return "";
            }
        }
        // 1.得到url中的文章id
        var aid = getURLparam("id");
        // aid正确性和非空判断
        if (aid == null || aid == "" && aid <= 0) {
            alert("访问失败！参数非法！");
        } else {
            // 1.加载文章
            function loadArticle() {
                // 请求后端得到文章详情并进行显示
                jQuery.ajax({
                    url: "artdetail",
                    type: "POST",
                    data: { "aid": aid },
                    success: function (data) {
                        if (data != null && data.success == 200) {
                            if (data.data != null && data.data.aid > 0) {
                                // 成功查询到数据
                                jQuery("#title").text(data.data.title);
                                jQuery("#create_time").text(data.data.create_time);
                                jQuery("#read_count").text(data.data.read_count);
                                // jQuery("#context").text(data.data.context);
                                markdownToHtml(data.data.context);
                            } else {
                                alert("文章不存在！");
                            }
                        } else {
                            alert("服务器繁忙！");
                        }
                    }
                });
            }
            loadArticle();

            // 2.加载个人信息
            function loadUserInfo() {
                // 请求后端查询用户的详细信息
                jQuery.ajax({
                    url: "getuserbyaid",
                    type: "GET",
                    data: { "aid": aid },
                    success: function (data) {
                        if (data != null && data.success == 200) {
                            if (data.data != null && data.data.uid > 0) {
                                jQuery("#username").text(data.data.username);
                                jQuery("#acount").text(data.data.acount);
                            } else {
                                alert(data.msg);
                            }
                        } else {
                            alert("服务器繁忙！");
                        }
                    }
                });
            }
            loadUserInfo();

            // 3.文章阅读量+1
            function addReadCount() {
                jQuery.ajax({
                    url: "addreadcount",
                    type: "POST",
                    data: { "aid": aid },
                    success: function (data) {
                        if (data != null && data.success == 200) {
                            console.log(data.data);
                        } else {
                            alert("服务器繁忙！");
                        }
                    }
                });
            }
            addReadCount();

            // 4.注销
            function logout() {
                if (confirm("确认注销？")) {
                    // session 清空
                    jQuery.ajax({
                        url: "logout",
                        type: "POST",
                        success: function (data) {
                            if (data != null && data.success == 200 && data.data == 1) {
                                // 注销成功
                                location.href = "login.html";
                            } else {
                                alert("注销失败！");
                            }
                        }
                    });
                }
            }

            // 5.判断是否为登录状态
            function isLogin() {
                jQuery.ajax({
                    url: "loginuserinfo",
                    type: "GET",
                    success: function (data) {
                        if (data != null && data.success == 200 && data.data != null && data.data.uid > 0) {
                            jQuery("#nickname").text(data.data.nickname);
                            // 登录状态
                        } else {
                            // 非登录状态
                            alert("请先登录！");
                            location.href = "login.html";
                        }
                    }
                });
            }
            isLogin();

            // 文章总数
            function account() {
                jQuery.ajax({
                    url: "myartlist",
                    type: "Get",
                    success: function (data) {
                        if (data != null && data.success == 200 && data.data != null) {
                            jQuery("#account").text(data.data.length);

                        }
                    }
                });
            }
            account();

            // 将 Markdown 转换成 html
            function markdownToHtml(md) {
                var testView = editormd.markdownToHTML("context", {
                    markdown: md, // Also, you can dynamic set Markdown text
                    // htmlDecode : true,  // Enable / disable HTML tag encode.
                    // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
                });
            }
        }
    </script>
</body>

</html>